html,js代码移植到vue项目上

您所在的位置：网站首页 › 原生js vue › html,js代码移植到vue项目上

html,js代码移植到vue项目上

#html,js代码移植到vue项目上| 来源: 网络整理| 查看: 265

对于我们这些学了一年左右的前端萌新来说，用好vue已经是很难得了，但是慢慢的我需要提高自己的技术，比如看了一些前端特效什么的，但是这些前端特效都是js,html的文件，我们无法直接利用这些文件，我们如何把这些移植到vue上，这是这篇文章所探讨的问题

简单案例

中级案例

简单案例

直接先上一个html,js的简单特效案例，一个小球自由落体并弹跳的特效

代码如下

Document var ball = { x: 555, y: 100, r: 20, g: 2, vx: -4, vy: -10, color: 'blue' } window.onload = function () { var canvas = document.querySelector('#canvas') canvas.width = 1000; canvas.height = 800; if (canvas.getContext('2d')) { var context = canvas.getContext('2d') } else { alert('浏览器不支持Canvas，请更换浏览器') } setInterval(function () { render(context) update() }, 50) } function update() { ball.x += ball.vx; ball.y += ball.vy; ball.vy += ball.g; if (ball.y >= 800 - ball.r) { ball.y = 800 - ball.r ball.vy = -ball.vy * 0.4 } } function render(cxt) { cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height) cxt.fillStyle = ball.color; cxt.beginPath() cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI) cxt.closePath() cxt.fill() }

可以看出代码并不复杂，里面的代码如何写的我不做解释，你可以去看其他博客，也可以私聊我

我需要把这html放到vue文件中并且能运行

先看结构，一个ball变量 3个方法，其中一个方法是主方法（window.onload方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法）

改成vue中的代码

//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, data() { //这里存放数据 return { //这个没问题吧，很容易想到 ball: { x: 555, y: 100, r: 20, g: 2, vx: -4, vy: -10, color: "blue", }, }; }, //监听属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: { init() { // var canvas = document.querySelector("#canvas"); //这个知道吧，vue建议用refs获取，如果用上面的获取，会产生如果重名了会很混乱（跨vue文件，慎用） var canvas=this.$refs.canvas canvas.width = 1000; canvas.height = 800; if (canvas.getContext("2d")) { var context = canvas.getContext("2d"); } else { alert("浏览器不支持Canvas，请更换浏览器"); } console.log(context); setInterval(() => { this.myRender(context); this.update(); }, 50); }, update() { this.ball.x += this.ball.vx; this.ball.y += this.ball.vy; this.ball.vy += this.ball.g; if (this.ball.y >= 800 - this.ball.r) { this.ball.y = 800 - this.ball.r; this.ball.vy = -this.ball.vy * 0.4; } }, myRender(cxt) { cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height); cxt.fillStyle = this.ball.color; cxt.beginPath(); cxt.arc(this.ball.x, this.ball.y, this.ball.r, 0, 2 * Math.PI); cxt.closePath(); cxt.fill(); }, }, //生命周期 - 创建完成（可以访问当前this实例） created() {}, //生命周期 - 挂载完成（可以访问DOM元素） mounted() { this.init(); }, beforeCreate() {}, //生命周期 - 创建之前 beforeMount() {}, //生命周期 - 挂载之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 销毁之前 destroyed() {}, //生命周期 - 销毁完成 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发 }; /*@import url(); 引入公共css类*/ .main { height: 100vh; }

基本很简单，就是把三个方法写在method里面，一个主方法放在mouted调用

中级案例

html,js实现时钟

原目录结构

代码如下

arr.js

var arr = [ // 0 [ [0, 0, 1, 1, 1, 0, 0], [0, 1, 1, 0, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 0, 1, 1, 0], [0, 0, 1, 1, 1, 0, 0] ], // 1 [ [0, 0, 0, 1, 1, 0, 0], [0, 1, 1, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [1, 1, 1, 1, 1, 1, 1] ], // 2 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 1, 1, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 1, 1, 1, 1, 1], ], // 3 [ [1, 1, 1, 1, 1, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 1, 0, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 4 [ [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 1, 0], [0, 0, 1, 1, 1, 1, 0], [0, 1, 1, 0, 1, 1, 0], [1, 1, 0, 0, 1, 1, 0], [1, 1, 1, 1, 1, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 1, 1], ], // 5 [ [1, 1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 1, 0], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 6 [ [0, 0, 0, 0, 1, 1, 0], [0, 0, 1, 1, 0, 0, 0], [0, 1, 1, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 7 [ [1, 1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], ], // 8 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 9 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 1, 1, 0, 0, 0, 0], ], // : [ [0, 0, 0, 0], [0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0], ] ]

index.html

Document

index.js

开始转换，把这些代码移植到vue中，arr.js,index.js放的位置，Test.vue是引用展示页面

arr.js就加了导出

export const arr = [ // 0 [ [0, 0, 1, 1, 1, 0, 0], [0, 1, 1, 0, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 0, 1, 1, 0], [0, 0, 1, 1, 1, 0, 0] ], // 1 [ [0, 0, 0, 1, 1, 0, 0], [0, 1, 1, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [1, 1, 1, 1, 1, 1, 1] ], // 2 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 1, 1, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 1, 1, 1, 1, 1], ], // 3 [ [1, 1, 1, 1, 1, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 1, 0, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 4 [ [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 1, 0], [0, 0, 1, 1, 1, 1, 0], [0, 1, 1, 0, 1, 1, 0], [1, 1, 0, 0, 1, 1, 0], [1, 1, 1, 1, 1, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 1, 1], ], // 5 [ [1, 1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 1, 1, 1, 1, 0], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 6 [ [0, 0, 0, 0, 1, 1, 0], [0, 0, 1, 1, 0, 0, 0], [0, 1, 1, 0, 0, 0, 0], [1, 1, 0, 0, 0, 0, 0], [1, 1, 0, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 7 [ [1, 1, 1, 1, 1, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 0, 1, 1, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], [0, 0, 1, 1, 0, 0, 0], ], // 8 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 1, 1, 0], ], // 9 [ [0, 1, 1, 1, 1, 1, 0], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [1, 1, 0, 0, 0, 1, 1], [0, 1, 1, 1, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 0, 1, 1], [0, 0, 0, 0, 1, 1, 0], [0, 0, 0, 1, 1, 0, 0], [0, 1, 1, 0, 0, 0, 0], ], // : [ [0, 0, 0, 0], [0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0], ] ]

index.js 引入arr.js，导出init 并把docment的语句删了，传入参数，再在Test.vue中调用init并传入this.$refs.canvas这参数

import {arr} from './arr.js' const WINDOW_WIDTH = 1000; const WINDOW_HEIGHT = 800; const RADIUS = 6; const MARGIN_LEFT = 80; const MARGIN_TOP = 60; var now = new Date() var balls = [] const colors = ['#33BEE5', '#0099CC', '#9933CC', '#AA66CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', 'pink', 'yellow'] export function init(canvas) { //删除换到vue文件中，这里不能直接this.$refs.canvas // var canvas = document.querySelector('canvas') canvas.width = WINDOW_WIDTH; canvas.height = WINDOW_HEIGHT var context = canvas.getContext('2d') setInterval(() => { render(context); update() }, 40); } function render(cxt) { cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT) var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); renderArr(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); renderArr(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); renderArr(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); renderArr(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt); renderArr(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt); renderArr(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); renderArr(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt); renderArr(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt); for (var i = 0; i < balls.length; i++) { cxt.fillStyle = balls[i].color; cxt.beginPath() cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI) cxt.closePath() cxt.fill() } ballsUpdate() console.log(balls.length); } function ballsUpdate() { for (var i = 0; i < balls.length; i++) { balls[i].x += balls[i].v_x; balls[i].y += balls[i].v_y; balls[i].v_y += balls[i].g; if (balls[i].y >= 800 - RADIUS) { balls[i].y = 800 - RADIUS balls[i].v_y = -balls[i].v_y * 0.4 } } // 性能优化，销毁球 var t = 0; for (let i in balls) { if ((balls[i].x + RADIUS) > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) { balls[t++] = balls[i]; } } while (balls.length > Math.min(300, t)) { balls.pop(); } } // 更新时间 function update() { // 现在的时间 var cur_now = new Date() var cur_hours = cur_now.getHours(); var cur_minutes = cur_now.getMinutes(); var cur_seconds = cur_now.getSeconds(); // 上一秒的时间 var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); // 时间不= 就把新时间给旧时间 if (cur_now != now) { now = cur_now; } // 旧时间和新时间哪里不一样就改哪里 if (parseInt(cur_hours / 10) != parseInt(hours / 10)) { addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(cur_hours / 10)) } if (parseInt(cur_hours % 10) != parseInt(hours % 10)) { addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_hours % 10)) } if (parseInt(cur_minutes / 10) != parseInt(minutes / 10)) { addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes / 10)) } if (parseInt(cur_minutes % 10) != parseInt(minutes % 10)) { addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes % 10)) } if (parseInt(cur_seconds % 10) != parseInt(seconds % 10)) { addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds % 10)) } if (parseInt(cur_seconds / 10) != parseInt(seconds / 10)) { addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds / 10)) } } // 绘制时间 function renderArr(x, y, num, cxt) { cxt.fillStyle = 'skyblue' for (var i = 0; i < arr[num].length; i++) { for (var j = 0; j < arr[num][i].length; j++) { if (arr[num][i][j] == 1) { cxt.beginPath(); cxt.arc(x + j * 2 * (RADIUS + 1), y + i * 2 * (RADIUS + 1), RADIUS, 0, 2 * Math.PI) cxt.closePath() cxt.fill() } } } } function addBalls(x, y, num) { for (var i = 0; i < arr[num].length; i++) { for (var j = 0; j < arr[num][i].length; j++) { if (arr[num][i][j] == 1) { var one_ball = { x: x + j * 2 * (RADIUS + 1), y: y + i * 2 * (RADIUS + 1), g: 1.5 * Math.random(), v_x: i % 2 == 1 ? -4 : 4, v_y: Math.ceil(Math.random() * 10), color: colors[Math.floor(Math.random() * colors.length)] } balls.push(one_ball) } } } }

Test.vue

import { init } from "@/assets/js/index.js"; export default { //import引入的组件需要注入到对象中才能使用 components: {}, data() { //这里存放数据 return {}; }, //监听属性类似于data概念 computed: {}, //监控data中的数据变化 watch: {}, //方法集合 methods: {}, //生命周期 - 创建完成（可以访问当前this实例） created() {}, //生命周期 - 挂载完成（可以访问DOM元素） mounted() { var canvas = this.$refs.canvas init(canvas); }, }; /*@import url(); 引入公共css类*/ .main { height: 80vh; }

大功告成！！！

【本文地址】

html,js代码移植到vue项目上

html,js代码移植到vue项目上

今日新闻

推荐新闻